<template>
    <div class="cartWrapper">
        <img class="bigImg" :src="item?.bannerInfo.picUrl" alt="">
        <div class="textbox">
            <div class="contentText">{{item.content}}</div>

            <div class="lineCode">
                <div class="left">
                    <img class="avatar" :src="item?.avatar" alt="">
                    <p class="name">{{item.nickName}}</p>
                </div>

                <div class="right">
                    <van-icon name="good-job-o" />{{ item.supportNum}}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
defineProps<{
    item:any
}>()
</script>

<style lang="less" scoped>
.cartWrapper{
    width: 4.6rem;
    background-color: #ffffff;
    border-radius: 7px;
    display: inline-block;
    margin-bottom: 0.3rem;

    .bigImg{
        width: 4.6rem;
        border-radius: 7px;
    }

    .textbox{
        .contentText{
                width:4.3rem;    /* 定好宽度 */
                display:-webkit-box;
                -webkit-box-orient:vertical;
                -webkit-line-clamp:2;    /* 根据业务需求设置第几行显示省略号 */
                overflow:hidden;
                font-size: .3077rem;
                padding-top: .24rem;
                margin: 0 auto;
        }

        .lineCode{
            display: flex;
            justify-content: space-around;
            height: 1rem;
            .left{
                display: flex;
                height: 1rem;
                line-height: 1rem;
                .avatar{
                    width: .641rem;
                    height: .641rem;
                    border-radius:50%;
                }
                .name{
                    font-size: .3205rem;
                    line-height: .641rem;
                }
            }
            .right{
                font-size: .3205rem;
            }
        }
    }
}


</style>